<template>
   <div>
       <el-form ref="form" label-position="left" :rules="rules" :model="form" label-width="100px" size="medium">
           <el-form-item label="旧密码" prop="password">
               <el-input type="password" v-model="form.password" placeholder="请输入旧密码"></el-input>
           </el-form-item>
           <el-form-item label="新密码" prop="newPassword">
               <el-input type="password" v-model="form.newPassword" placeholder="请输入新密码"></el-input>
           </el-form-item>
           <el-form-item label="确认新密码" prop="qnewPassword">
               <el-input type="password" v-model="form.qnewPassword" placeholder="请再次输入新密码"></el-input>
           </el-form-item>
           <el-form-item style="margin-left: 45%;">
               <el-button type="primary" @click="onSubmit">修改</el-button>
               <el-button @click="onCancel">取消</el-button>
           </el-form-item>
       </el-form>
   </div>
</template>

<script>
	export default {
		data () {
            const valideRePassword = (rule, value, callback) => {
                if (value !== this.form.newPassword) {
                    callback(new Error('两次输入密码不一致'))
                } else {
                    callback()
                }
            }
            const newPasswordReg = /^[^\u4e00-\u9fa5]{0,}$/
            function validatenewPassword (rule, value, callback) {
                if (!value || newPasswordReg.test(value)) {
                    callback()
                } else callback(new Error('密码格式错误，只能是数字、字母和符号'))
            }
			return {
                formName: 'form',
                form: {
                    password: '',
                    newPassword: '',
                    qnewPassword: ''
                },
                rules: {
                    password: [
                        { required: true, message: '请输入旧密码', trigger: 'change,blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'change,blur' },
                        { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'change,blur' },
                        { validator: validatenewPassword, trigger: 'change,blur' }
                    ],
                    qnewPassword: [
                        { required: true, message: '请再次输入新密码', trigger: 'change,blur' },
                        { validator: valideRePassword, trigger: 'change,blur' }
                    ]
                }
            }
		},
		created () {

		},
		methods: {
            request () {
                // let params = { ...this.form, userId: this.$store.state.userInfo.user.userId }
                // ssoService.updatePassword(params).then(() => {
                //     this.close()
                //     this.openMessage()
                // }).catch((err) => {
                //     this.$message.error(err.message)
                // })
            },
            openMessage () {
                this.$alert('密码修改成功！', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {
                        setTimeout(() => {
                            this.$router.replace('login')
                        }, 0)
                    }
                })
            },
            onSubmit () {
                let formName = this.$data.formName
                this.$refs[formName].validate((valid) => {
                    if (valid) this.request()
                    return valid
                })
            },
            onCancel () {
                this.close()
            },
            close (refresh) {
                this.$modal.close()
                if (refresh && refresh === true) this.$state.query.callback()
            }
        }
	}
</script>

<style scoped>

</style>
